<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        <input type="hidden" id="id" value="{$row.id|default=''}">
        {if auth('roleManager') or $row.appraise==$APPRAISE_NONE}
        <input type="hidden" id="modify" value="1">
        {else/}
        <div class="text-center text-danger">{:lang('day.cannot_edit_info')}</div>
        {/if}

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('accounting.name')}</label>
            <div class="layui-input-inline layui-form-mid layui-word-aux">{$row.accounting_name|default=''}</div>
            <label class="layui-form-label">{:lang('day.progress_date')}</label>
            <div class="layui-input-inline">
                <input id="progress_date" name="progress_date" class="layui-input cssDate"
                       placeholder="{:lang('common.choose')}{:lang('day.progress_date')}"
                       value="{$row.progress_date|default=''}" onpicked="changeDate">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">{:lang('day.completion_status')}</label>
            <div class="layui-input-inline layui-form-mid layui-word-aux" data-type-list="completion_status_list"
                 data-value="{$row.completion_status|default=''}"></div>
            {if auth('roleManager')}
            <label class="layui-form-label required">{:lang('common.appraise')}</label>
            <div class="layui-input-inline">
                <select name="appraise" lay-verify="required" lay-filter="modifyDay"
                        default-value="{$row.appraise|default=''}" data-select-type="appraise_list">
                </select>
            </div>
            {/if}
        </div>

        <div class="text-right">
            {if auth('roleManager') or $row.appraise==$APPRAISE_NONE}
            <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" onclick="newTodo()">
                {:lang('common.btn_new')}
            </button>
            {/if}
        </div>
        <table class="layui-table">
            <thead>
            <tr>
                <th style="width:160px">{:lang('custom.name')}</th>
                <th>{:lang('day.content')}</th>
                <th style="width:95px">{:lang('common.estimate_time')}</th>
                <th style="width:95px">{:lang('common.actual_time')}</th>
                <th style="width:110px">{:lang('day.completion_status')}</th>
                {if auth('roleManager') or $row.appraise==$APPRAISE_NONE}
                <th style="width:35px">{:lang('common.operate')}</th>
                {/if}
            </tr>
            </thead>
            <tbody id="tabTodo">
            {foreach $todoList as $vo }
            <tr data-id="{$vo.id|default=''}">
                <td><select name="month_id" lay-search lay-verify="required" lay-filter="modifyTodo">
                    <option value="">{:lang("common.choose")}{:lang("custom.name")}</option>
                    {foreach $monthList as $val}
                    <option value="{$val.id}" {if $val.id==$vo.month_id}selected{/if}>{$val.custom_name}</option>
                    {/foreach}
                </select></td>
                <td><input type="text" name="content" class="layui-input"
                           placeholder="{:lang('common.input')}{:lang('day.content')}"
                           value="{$vo.content|default=''}" onchange="modifyTodoInput(this)"></td>
                <td><input type="text" name="estimate_time" class="layui-input" lay-verify="onlyNumber"
                           placeholder="{:lang('common.input')}{:lang('common.estimate_time')}"
                           value="{$vo.estimate_time|default=''}" onchange="modifyTodoNumber(this)"></td>
                <td><input type="text" name="actual_time" class="layui-input" lay-verify="onlyNumber"
                           placeholder="{:lang('common.input')}{:lang('common.actual_time')}"
                           value="{$vo.actual_time|default=''}" onchange="modifyTodoNumber(this)"></td>
                <td><select name="completion_status" lay-verify="required" lay-filter="modifyTodo"
                            default-value="{$vo.completion_status|default=''}"
                            data-select-type="completion_status_list">
                </select></td>
                {if auth('roleManager') or $row.appraise==$APPRAISE_NONE}
                <td><a href="#" class="layui-btn layui-btn-danger layui-btn-xs"
                       onclick="return deleteTodo(this)">{:lang('common.btn_delete')}</a></td>
                {/if}
            </tr>
            {/foreach}
            </tbody>
        </table>
    </form>
</div>
<script>
    layui.use(['myCommon'], function () {
        var $ = layui.jquery
            , form = layui.form
            , myCommon = layui.myCommon;
        window.newTodo = function () {
            myCommon.request.post({
                url: 'tally.todo/generateEmpty'
                , data: {day_id: "{$row.id|default=''}"}
                , prefix: true
            }, function (res) {
                location.reload();
            });
        }
        window.changeDate = function (dom) {
            modifyDay('progress_date', $(dom).val());
        }
        window.modifyDay = function (field, value) {
            if ($('#modify').size() == 0) return;
            var data = {id: $('#id').val()};
            data[field] = value;
            myCommon.request.post({
                url: 'tally.progress_day/edit'
                , data: data
                , prefix: true
            }, function (res) {
            }, function (res) {
                myCommon.msg.error(res.msg, function () {
                    $('#progress_date').val(res.data.progress_date);
                })
            });
        }
        window.modifyTodoNumber = function (dom) {
            if (isNaN($(dom).val())) {
                $(dom).val('');
                return;
            }
            modifyTodoInput(dom);
        }
        window.modifyTodoInput = function (dom) {
            var $dom = $(dom);
            modifyTodo($dom.closest('tr').attr('data-id'), $dom.attr('name'), $dom.val());
        }
        window.modifyTodo = function (id, field, value) {
            if ($('#modify').size() == 0) return;
            var data = {id: id};
            data[field] = value;
            myCommon.request.post({
                url: 'tally.todo/edit'
                , data: data
                , prefix: true
            }, function () {
                if (field == 'completion_status') {
                    location.reload();
                }
            });
        }
        window.deleteTodo = function (dom) {
            if ($('#modify').size() == 0) return;
            $tr = $(dom).closest('tr');
            myCommon.request.post({
                url: 'tally.todo/delete'
                , data: {id: $tr.attr('data-id')}
                , prefix: true
            }, function () {
                $tr.remove();
            });
        }

        form.on('select(modifyDay)', function (data) {
            modifyDay($(data.elem).attr('name'), data.value);
        });
        form.on('select(modifyTodo)', function (data) {
            $dom = $(data.elem);
            modifyTodo($dom.closest('tr').attr('data-id'), $dom.attr('name'), data.value);
        });
        myCommon.listen();
    });
</script>
